<template>
  <div class="comment-box">
    <comment
      :commentList="commentList"
      @doSend="sendContent"
      @doChidSend="childSend"
      :commentNum="commentList.length"
      :avatar="require('../assets/avator/'+userDetail.avator)"
    />
  </div>
</template>

<script>
import Comment from './base/Comment.vue'
import { mapState ,mapActions,mapMutations} from 'vuex'
import {AddCommentOne,AddCommentTwo} from '../request/api'
export default {
  data(){
    return{
        // 即将发表评论的用户头像
        avatar:'',
        params:{
          blogid:this.blogid,
          content:'',
          targetUserid:null,
          whichCommentid:null,
        },
        comments:[],
    }
  },
  components:{
      Comment
  },
  computed:{
        ...mapState({
            userDetail:state=>state.userInfo.userDetail,
            commentList:state=>state.comment.commentList
        })
    },
  props:{
    blogid:{
      type:Number,
      required:true
    },
  },
  methods:{
    ...mapActions({
      asyncChangeIsShowToast:'toastStatus/asyncChangeIsShowToast',
      getFetchCommentList:'comment/getFetchCommentList'
    }),
    ...mapMutations({
      setCommentList:'comment/setCommentList'
    }),
    // 发送一级评论
    async sendContent(content){
      // 需要的参数：blogid，content
      this.params.content = content
      let res = await AddCommentOne(this.params)
      if(res.data.state == 200){
        // 发布成功
        this.asyncChangeIsShowToast({
          type:'success',
          msg:'评论成功'
        })
      }else{
        this.asyncChangeIsShowToast({
          type:'error',
          msg:'发生错误！'
        })
      }
      // 重新获取评论列表
      this.getFetchCommentList(this.params)
    },
    // 发送二级评论
    async childSend(content,targetuserid,whichcommentid){
      // 内容--对象id--哪条评论的id---blogid
      this.params.content = content
      this.params.targetUserid = targetuserid
      this.params.whichCommentid = whichcommentid
      this.params.blogid = this.blogid
      let res =await AddCommentTwo(this.params)
      if(res.data.state == 200){
        // 发布成功
        this.asyncChangeIsShowToast({
          type:'success',
          msg:'评论成功'
        })
      }else{
        this.asyncChangeIsShowToast({
          type:'error',
          msg:'发生错误！'
        })
      }
      // 重新获取评论列表
      this.getFetchCommentList(this.params)
    }
  },
  created(){
   
  }
}
</script>

<style scoped>
.comment-box{
    width: 700px;
    margin-top: 20px;
}
</style>
